<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>签到</title>
    <link rel="stylesheet" href="../../common/bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0
        }
        html {
            /*height: 100%;*/
        }
        body {
            background: linear-gradient(#d13d4b, #8b2537);
        }
        .signin-ani {
            position: absolute;
        }
        .signin-txt {
            position: absolute;
        }
        a:visited {
            color: #ffffff;
        }
        a:hover {
            color: #ffffff;
        }
        @font-face {
            font-family:"南宋书局体";src:url('fonts/南宋书局体.ttf');
        }
        .signin-WXName {
            background: url('img/icon/icon_head.png') no-repeat 0 5px/17px 19px;
            border: none;
            border-bottom: 1px solid #ffd57f;
            outline: none;
        }
        .signin-TrueName {
            background: url('img/icon/icon_edit.png') no-repeat 0 5px/17px 19px;
            border: none;
            border-bottom: 1px solid #ffd57f;
            outline: none;
        }
        @media (min-width: 769px) {
            body {
                height: 1955px;
                background: linear-gradient(#d13d4b, #8b2537);/*原设计颜色*/
                position: relative;
            }
        }
    </style>
</head>
<body class="signin-resize" style="position:relative;height: 480px">
<!--<div class="container" style="position:relative">-->
    <!--树枝-->
    <img src="img/vote/shuzhi_l.png" class="signin-resize signin-ani vote-delongl" style="width:170px;height:115px;top:20px;left:0;z-index:3;">
    <img src="img/vote/shuzhi_r.png" class="signin-resize signin-ani vote-delongr" style="width:170px;height:115px;top:20px;right:0;z-index:3;">
    <!--灯笼-->
    <img src="img/vote/denglong_l.png" class="signin-resize signin-ani" style="width:148px;height:113px;top:88px;left:0;">
    <img src="img/vote/denglong_r.png" class="signin-resize signin-ani" style="width:156px;height:80px;top:70px;left:155px;">
    <!--烟花-->
    <img src="img/vote/yanhua1.png" class="signin-resize signin-ani" style="width:20px;height:17px;top:45px;left:115px;">
    <img src="img/vote/yanhua2.png" class="signin-resize signin-ani" style="width:26px;height:22px;top:34px;left:162px;">
    <!--底部建筑-->
    <img src="img/vote/house.png" class="signin-resize signin-ani" style="width:320px;height:70px;top:410px;">
    <!--头像-->
    <div class="signin-resize signin-ani" style="width:90px;height:90px;top:90px;/*left:120px;*/left:0;right:0;margin:0 auto;border:2px solid #ffd17f;border-radius:50%;overflow:hidden;
background: white"><img src="img/card/myself.png" class="signin-img-head" style="width:100%;height:100%;" alt=""></div>
    <!--微信名-->
    <label for="signin-WXName" class="signin-ani signin-resize" style="top:200px;left:70px;font-weight:normal;letter-spacing:5px;color:#ffd57f;font-size:12px;
padding-top:8px;padding-left:5px;">微信名：</label><input type="text" id="signin-WXName" class="signin-ani signin-resize signin-WXName"
                                                      style="width:220px;height:30px;top:200px;left:0;right:0;margin:0 auto;padding-left:88px;padding-bottom:0px;color:#ffd57f;">
    <!--真实姓名-->
    <label for="signin-TrueName" class="signin-ani signin-resize" style="top:240px;left:70px;font-weight:normal;letter-spacing:5px;color:#ffd57f;font-size:12px;
padding-top:8px;padding-left:5px;">修改为：</label><input type="text" id="signin-TrueName" class="signin-ani signin-resize signin-TrueName"
                                                      style="width:220px;height:30px;top:240px;left:0;right:0;margin:0 auto;padding-left:88px;padding-bottom:0px;color:#ffd57f;" placeholder="真实姓名">
    <!--提交按钮-->
    <button class="signin-ani signin-resize" style="border:none;border-radius:3px;width:220px;height:30px;top:300px;left:0;right:0;margin:0 auto;letter-spacing:35px;
padding-left:37%;background:#e94e4e;color:white;font-size:12px" onclick="sent();"><span>提交</span></button>
    <!--签到提示-->
    <p class="signin-ani signin-resize signin-p-tooltip" style="width:126px;top:366px;left:0;right:0;margin:0 auto;font-size:14px;color:#ffd57f;display:none"></p>
    <!--签到人数-->
    <p class="signin-ani signin-resize signin-p-sigNum" style="width:92px;top:417px;left:0;right:0;margin:0 auto;font-size:12px;color:#ffd57f;letter-spacing:5px;">已签到<span
            class="signin-span-sigNum" style="color:white;">59</span>人</p>
<!--</div>-->

<script src="../../common/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../common/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>

    /*不同尺寸屏幕手机样式适配*/
    scaleW = window.innerWidth/320;
    scaleH = window.innerHeight/480;
    var resizes = document.querySelectorAll('.signin-resize');
    for (var j=0; j<resizes.length; j++) {
        if (window.innerWidth <= 768) {
            if (window.innerWidth > window.innerHeight){
                resizes[j].style.width = parseInt(resizes[j].style.width)*scaleH + 'px';
                /*如果是头像，纵向用scaleW的比例*/
                if (resizes[j].style.height === '90px') {
                    resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
                }else{
                    resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
                }

                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';
                resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH + 'px';
                resizes[j].style.right = parseInt(resizes[j].style.right)*scaleH + 'px';
                /*resizes[j].style.top = parseInt(resizes[j].style.top)/1.5 + 'px';
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)/1.5 + 'px';
                resizes[j].style.left = parseInt(resizes[j].style.left)*1.5 + 'px';
                resizes[j].style.right = parseInt(resizes[j].style.right)*1.5 + 'px';*/

                resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleW + 'px';
                resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleW + 'px';
                resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleH + 'px';
                resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleH + 'px';

                /*resizes[j].style.paddingTop = parseInt(resizes[j].style.paddingTop)*scaleH + 'px';*/
                if (scaleH === 1) {
                    resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleH + 'px';
                } else {
                    resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*(scaleH+14) + 'px';
                }
                resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleH + 'px';
                /*resizes[j].style.paddingRight = parseInt(resizes[j].style.paddingRight)*scaleW + 'px';*/

                resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleH + 'px';
                resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleH + 'px';
            }
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            /*如果是头像，纵向用scaleW的比例*/
            if (resizes[j].style.height === '90px') {
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
            }else{
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleH + 'px';
            }

            resizes[j].style.top = parseInt(resizes[j].style.top)*scaleH + 'px';
            resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';

            resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleH + 'px';
            resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleH + 'px';
            resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
            resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';

            /*resizes[j].style.paddingTop = parseInt(resizes[j].style.paddingTop)*scaleH + 'px';*/
            if (scaleH === 1) {
                resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleH + 'px';
            } else {
                resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*(scaleH+14) + 'px';
            }
            resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleW + 'px';
            /*resizes[j].style.paddingRight = parseInt(resizes[j].style.paddingRight)*scaleW + 'px';*/

            resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleW + 'px';
            resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleW + 'px';
        }else{
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            /*如果是头像，纵向用scaleW的比例*/
            if (resizes[j].style.height === '90px') {
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
            }else{
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
            }

            resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
            resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';

            resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleW + 'px';
            resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleW + 'px';
            resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
            resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';

            /*resizes[j].style.paddingTop = parseInt(resizes[j].style.paddingTop)*scaleH + 'px';*/
            if (scaleH ===1) {
                resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleH + 'px';
            } else {
                resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*(scaleH+14) + 'px';
            }
            resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleW + 'px';
            /*resizes[j].style.paddingRight = parseInt(resizes[j].style.paddingRight)*scaleW + 'px';*/

            resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleW + 'px';
            resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleW + 'px';
        }
    }
    /*不同尺寸屏幕手机字体大小适配*/
    var scales = document.querySelectorAll('.signin-txt');
    for (var i=0; i<scales.length; i++) {
        var ss = scales[i].style;
        ss.webkitTransform =
            ss.MsTransform =
                ss.msTransform =
                    ss.MozTransform =
                        ss.OTransform =
                            ss.transform=
                                'translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px)' +
                                'translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)' +
                                'scaleX('+scaleW+')' +
                                'scaleY('+scaleH+')';
    }

    window.onload = function(){
        $('#signin-WXName').val(data['name']);
        /*$('.signin-p-tooltip').hide();*/
    };

    /*发送提交*/
    var data = {
        name: 'berysong',
        msg1: "已签到，感谢有你！",
        msg2: "请填写真实姓名。"
    };
    function sent(url,img,trueName) {
        /*$.post(
        'url',
        {
            img:'img',
            trueName:'trueName'
        },
        function(){*/
        $('.signin-p-tooltip').text(data.msg1).show(200,'linear');
        /*})*/
    }
</script>
</body>
</html>